import React from 'react'
import { connect } from 'dva'
import { Form, Input, Button, Radio, Checkbox, Select  } from 'antd'
import styles from './index.less'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;

const plainOptions = ['Apple', 'Pear', 'Orange'];

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}


@Form.create()
class Room extends React.Component {
    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
            values.roomnum = Number(values.roomnum)
            let payload = {
                ...this.props.data,
                ...values
            }
            this.props.dispatch({
                type: 'room/fetch',
                payload: payload,
            });
        }
        });
    }

    onlyLook = () => {
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                // console.log('Received values of form: ', values);
                // console.log(this.props.data)
                values.roomnum = Number(values.roomnum)
                let payload = {
                    ...this.props.data,
                    ...values,
                    closeLocalMedia: true,
                }
                // console.log(payload)
                this.props.dispatch({
                    type: 'room/fetch',
                    payload: payload,
                });
            }
        });
    }

    render (){
        const { getFieldDecorator } = this.props.form;
        return(
            <Form className={styles.form} onSubmit={this.handleSubmit}>
                <FormItem label="用户名">
                {getFieldDecorator('identifier',{
                    initialValue: 'video_39179258'
                })(<Input />)}
                </FormItem>
                <FormItem label="房间号">
                {getFieldDecorator('roomnum',{
                    initialValue: '100905'
                })(<Input />)}
                </FormItem>
                <Button className={styles.button} type="primary" htmlType="submit" >我要视频通话</Button><br/>
                <Button className={styles.button} onClick={this.onlyLook}>我要观看</Button>
                <p>注意：如果房间已经存在，则加入房间</p>

                <RadioGroup>
                    <Radio value={1}>A</Radio>
                    <Radio value={2}>B</Radio>
                    <Radio value={3}>C</Radio>
                    <Radio value={4}>D</Radio>
                </RadioGroup>

                <CheckboxGroup options={plainOptions}  />

                <Select
                    mode="tags"
                    style={{ width: '100%' }}
                    placeholder="Tags Mode"
                >
                    {children}
                </Select>,

            </Form>
        )
        
    }
};

Room.propTypes = {
};

const mapStateToProps = state => ({
    data: state.room
})


export default connect(mapStateToProps)(Room);